<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1.基本使用</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>

    <!-- 
			Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

			一、如何定义一个组件？
						使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
						区别如下：
								1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
								2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
						备注：使用template可以配置组件结构。

			二、如何注册组件？
							1.局部注册：靠new Vue的时候传入components选项
							2.全局注册：靠Vue.component('组件名',组件)

			三、编写组件标签：
							<school></school>
		-->
    <div id="root">
        <h1>{{msg}}</h1>
        <hr>
        <hello></hello>
        <!--  第三步使用组件 -->
        <company></company>
        <hr>
        <!--  第三步使用组件 -->
        <emp></emp>
    </div>

    <script type="text/javascript">
        /* 第一步创建 company 组件 */
        const company = Vue.extend({
            /* 一定不要写 el 配置项，因为最终的组件都是归 vm 管理，由 vm 服务于哪个容器 */
            // el: '#root',
            template: `
                <div>
                    <h2>公司名称：{{name}}</h2>
                    <h2>公司地址：{{address}}</h2>
                </div>
            `,
            data() {
                return {
                    name: '奇瑞',
                    address: '花园大道'

                }
            },
        });
        /* 第一步创建 emp 组件 */
        const emp = Vue.extend({
            template: `
                <div>
                    <h2>职员名称：{{empName}}</h2>
                    <h2>职员年龄：{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    empName: 'bujunjie',
                    age: 18
                }
            }
        });


        const hello = Vue.extend({
            template: `
                <div>
                 <h2> 你好哈哈哈{{name}}<h2/>
                </div>
            `,
            data() {
                return {
                    name: 'Bob'
                }
            }
        });

        //  vue 注册全局组件
        Vue.component('hello', hello);
        new Vue({
            el: '#root',
            //  第二步：进行组件的注册
            components: {
                company: company,
                emp: emp
            },
            data() {
                return {
                    msg: '你好呀，哈哈哈'
                }
            },
        });
    </script>

</body>

</html>